<template>
  <div class="searchSug">
    <div class="input-con">
      <input type="text" v-model="keywords" name="" id="" />
    </div>
    <div class="sugs">
      <h3 @click="searchText(item.title)" v-for="(item, i) in sugs" :key="i">
        {{ item.title }}
      </h3>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { IAjaxData } from "../types/types";

export default Vue.extend({
  name: "SearchSug",
  data() {
    return {
      keywords: "",
      timer: undefined as undefined | number,
      sugs: [] as { title: string }[],
    };
  },
  methods: {
    searchText(title: string): void {
      this.$router.push(`./Search?keyword=${title}`);
    },
  },
  created() {
    this.keywords = this.$route.query.kk;
  },
  watch: {
    keywords(newText: string): void {
      clearTimeout(this.timer);
      this.timer = setTimeout(async () => {
        const data: IAjaxData = await this.$request(
          `https://so.edianzu.com/sug?time=1662336154781&code=591ded2b6bab7361c63b9d96e12ea791&plat=2&q=${newText}&size=10`,
          "GET"
        );
        this.sugs = data.data;
      }, 500);
    },
  },
});
</script>

<style lang="less">
.searchSug {
  .input-con {
    height: 50px;
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    input {
      width: 360px;
      height: 30px;
      border: none;
      border-radius: 30px;
      padding-left: 10px;
      background-color: #eee;
      &::-webkit-input-placeholder {
        // 专门设置placeholder的字体 不影响输入进去的字体
        font-size: 14px;
      }
    }
  }
}
</style>
